<template>
  <div>
    <el-button
      style="margin-left:20px"
      size="small"
      type="primary"
      @click="addFreight"
      slot="reference"
    >新增</el-button>
    <el-form :model="form" ref="formRef">
      <!-- v-if="index == 0" -->

      <el-form-item
        v-for="(item,index) in form.freightList"
        :key="index"
        :label="index == 0 ? '运费设置' : ''"
        :rules="{ required: true, message: '运费不能为空', trigger: 'blur'}"
        :label-width="formLabelWidth"
      >
        <div class="input-container">
          <el-select v-model="item.provinceId" placeholder="请选择" v-if="options.length!=0">
            <el-option
              v-for="data in options"
              :key="data.id"
              :label="data.cname"
              :value="data.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
          <el-input
            placeholder="请输入运费"
            style="margin-right:10px"
            v-model.number="item.postageMoney"
          ></el-input>
          <span>元</span>

          <el-button
            style="margin-left:20px;color:#F56C6C"
            size="small"
            type="text"
            v-if="index >= 0"
            @click="deleteFreight(index,item)"
            slot="reference"
          >删除</el-button>
        </div>
      </el-form-item>

      <el-form-item :label-width="formLabelWidth">
        <el-button plain @click="resetForm('formRef')">取消</el-button>
        <el-button type="primary" @click="submitForm('formRef')">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editIndex: null, //编辑的索引
      form: {
        freightList: [{ provinceId: "", postageMoney: "", id: "" }]
      },
      options: [],
      formLabelWidth: "100px",
      deletePostageIds: []
    };
  },
  mounted() {
    this.$service.getAllArea().then(res => {
      this.options = res.data;
    });
  },
  methods: {
    initData(row, index) {
      //console.log(row);
      let skuId = row.id;
      let freightList = row.postageList;
      this.editIndex = index;
      if (freightList && freightList.length > 0) {
        this.form.freightList = freightList;
      }
      return;

      this.$service.getPostageLis({ skuId: skuId }).then(res => {
        let freightList = res.data;
        if (freightList && freightList.length > 0) {
          this.form.freightList = freightList;
        }
      });
    },
    addFreight() {
      this.form.freightList.push({ provinceId: "", postageMoney: "", id: "" });
    },
    deleteFreight(index, item) {
      //console.log(item);
      if (item.id != "") {
        this.deletePostageIds.push(item.id);
      }
      this.form.freightList.splice(index, 1);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var find = this.displayDate();
          if (find) {
            this.$message.error("不能重复设置同一地区运费！");
            this.$emit("close", true);
            return;
          }

          let list = [];
          this.form.freightList.forEach(item => {
            if (item.provinceId && item.postageMoney) {
              list.push({
                provinceId: item.provinceId,
                postageMoney: item.postageMoney,
                id: item.id
              });
            }
          });

          this.$emit("freight", list, this.editIndex, this.deletePostageIds);
          this.editIndex = null;
          this.$refs[formName].resetFields();
        }
      });
    },
    displayDate() {
      var find = false;
      for (var i = 0; i < this.form.freightList.length; i++) {
        for (var j = i + 1; j < this.form.freightList.length; j++) {
          if (
            this.form.freightList[i].provinceId ==
            this.form.freightList[j].provinceId
          ) {
            find = true;
            break;
          }
        }
        if (find) {
          break;
        }
      }

      return find;
    },
    resetForm(formName) {
      this.$emit("close", false);
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss">
.input-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .el-select {
    flex: 1;
    margin-right: 20px;
  }
  .el-input {
    flex: 1;
  }
}
</style>